<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>魏远商城</title>
		<meta name="viewport" content="initial-scale=1, maximum-scale=1">
		<link rel="shortcut icon" href="/favicon.ico">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="css/sm.css">
		<link rel="stylesheet" href="css/sm-extend.css">
		<link rel="stylesheet" href="css/ionicons.css">
		<link rel="stylesheet" href="css/tab-cart.css">
		<link rel="stylesheet" href="css/mui.min.css" />
		<link rel="stylesheet" href="css/style.css" />
		<style type="text/css">
			<style type="text/css">.order-back {
				height: 100%;
				width: 2.2rem;
				display: inline-block;
				text-align: center;
			}
			
			.bar {
				padding-left: 0px;
			}
			
			.title {
				/*text-align: left;*/
				position: absolute;
				display: block;
				width: 100%;
				padding: 0;
				margin: 0;
				font-size: 0.9rem;
				font-weight: normal;
				line-height: 2.2rem;
				white-space: nowrap;
				color: #e9af29;
				/*padding-left: 30%;*/
				display: inline-block;
				/*width: calc(100% - 2.2rem);*/
				top: 0px;
			}
			
			#order-back {
				visibility: hidden;
			}
			
			.cart-foot {
				background-color: white;
			}
			
			.mui-popup {
				border: 1px solid #777;
			}
		</style>
		</style>
	</head>

	<body>
		<div class="page-group">
			<!--<div class="page page-current">-->
				<!--标题栏-->
				<header class="bar bar-nav">
					<a class="button button-link button-nav pull-right write">编辑</a>
					<h1 class="title">购物车</h1>
					<a href=""></a>
				</header>
				<!-- 工具栏 -->
				<div class="cart-foot">
					<div class="cart-foot-le">
						<div><span class="all-gou"></span></div>
						<span>全选</span>
						<span class="float-ri allprice">0</span>
						<span class="float-ri size-1"></span>
						<span class="float-ri">¥</span>
					</div>
					<div class="cart-foot-ri">
						<p>结算（<span class="all-times">0</span>）</p>
					</div>
				</div>

				<!--这里是页面内容区域-->
				<div class="content" style="bottom: 2rem;margin-bottom: 60px;">
					<p class="cart-weight">
						<span>商品清单</span>
						<!--<span>7.60kg</span>
						<span>总重量约</span>-->
					</p>

					<!--<div class="cart-goods">
						<div class="cart-goods-le"><img class="cart-choose" src="img/choose.png" alt="" height="20%"/><img class="cart-goods-fi" src="img/poduct.png" alt="" height="80%"/></div>
						<div class="cart-goods-ri">
							<p>台湾文旦<span class="cart-goods-ri-weight">1.50kg</span></p>
							<p>3个</p>
							<p class="cart-goods-ri-money">¥<span>69.</span><span>00</span></p>
							<div class="mui-numbox" data-numbox-min='1' data-numbox-max='100' style="height: 25px;width: 60px;margin-top: -30px;float: right;margin-right: 10px;background: white;border: none;">
								<button class="mui-btn mui-btn-numbox-minus" type="button" style="width: 25px;border-radius: 100%;color: #e9af29;">-</button>
								<input id="test" class="mui-input-numbox" type="number" value="1" style="width: 20px!important;margin-left: -10px;border: none!important;padding: 0!important;"/>
								<button class="mui-btn mui-btn-numbox-plus" type="button" style="width: 25px;border-radius: 100%;color: #e9af29;">+</button>
							</div>
						</div>
					</div>-->

					<!--<div class="cart-goods">
						<div class="cart-goods-le">
							<span class="remove"></span>
							<div><span class="gou"></span></div>
							<img class="cart-goods-fi" src="img/poduct.png" alt="" height="80%"/>
						</div>
						<div class="cart-goods-ri">
							<div class="outdate">此商品已下架</div>
							<p>台湾文旦<span class="cart-goods-ri-weight">1.50kg</span></p>
							<p>3个</p>
							<p class="cart-goods-ri-money">¥<span>69.</span><span>00</span></p>
							<div class="mui-numbox33" data-numbox-min='1' data-numbox-max='100' style="height: 30px;width: 60px;margin-top: -30px;float: right;margin-right: 10px;background: white;border: none;">
				&lt;!&ndash;				<button class="mui-btn mui-btn-numbox-minus jian" type="button" style="width: 30px;border-radius: 100%;color: #e9af29;">-</button>
								<input id="test" class="mui-input-numbox shu" type="number" value="1" style="width: 30px!important;margin-left: -15px;border: none!important;padding: 0!important;"/>
								<button class="mui-btn mui-btn-numbox-plus jia" type="button" style="width: 30px;border-radius: 100%;color: #e9af29;">+</button>&ndash;&gt;
							</div>
						</div>
					</div>-->

				</div>
				<nav id="footer" class="footer mui-bar-tab">
					<a class="tab-item external" href="tab-home.html">
						<img class="a1" src="img/home1.png" alt="" /><br />
						<span>首页</span>
					</a>
					<a class="tab-item external " href="tab-category.html">
						<img class="a2" src="img/category.png" alt="" /><br />
						<span>分类</span>
					</a>
					<span id="tanchu" class="tab-item external">
						<div><img src="img/tab.png" alt="" id="tab-add"/></div>
					</span>
					<a onclick="yc()" class="tab-item external" href="tab-cart.html">
						<img class="a3" src='img/shop.png' alt="" /><br />
						<span style="color: #e9af29;">购物车</span>
					</a>
					<a class="tab-item external a4" href="tab-me.html">
						<img class="a4" src="img/mine.png" alt="" /><br />
						<span>我的</span>
					</a>
				</nav>
			<!--</div>-->
		</div>

		<!--<script type="text/javascript" src="js/zepto.js" charset="UTF-8"></script>-->
		<!--<script type="text/javascript" src="js/sm.min.js" charset="UTF-8"></script>-->
		<!--<script type="text/javascript" src="js/sm-extend.min.js" charset="UTF-8"></script>-->
		<!--<script type="text/javascript" src="js/common.js" charset="UTF-8"></script>-->
		<script src="js/mui.min.js"></script>
		<script src="js/jquery-3.1.1.min.js"></script>
		<script src="js/url.js"></script>
		<script type="text/javascript">
			//			$(function() {
			//				$('.content').append('<p class="empty-cart"><img src="img/empty-cart.png" width="80" alt="" /><br/><br/>亲！购物车是空的~ 您可以<br/><br/><a>再去逛逛</a></p>');
			//			});
			// 初始化组件

			/*点击加一减一*/
			/*var jian = document.getElementsByClassName('content');
			var jia = document.getElementsByClassName('content').getElementsByClassName('jia').value;
			var shu = document.getElementsByClassName('content').getElementsByClassName('shu');*/
			//			mui.plusReady(function() {
			//				document.addEventListener('cart', function() {
			//					$('.content').html('');
			//					getinfor();
			//					$('.allprice').text(Number(0));
			//					console.log('刷新333')
			//				})
			//			})

			$('.content').on('tap', '.cart-goods img', function() {
				//				alert(111);
				hrefgo('details.html', $(this).parent().parent().attr('proid'));

			});

			function hrefgo(a, c) {
				localStorage.whereId = c;
				mui.openWindow({
					url: a,
					show: {
						aniShow: 'pop-in'
					}
				})
			}

			/*点击增减功能代码*/
			$('.content').on('tap', '.jian', function(e) {
				e.stopPropagation();
				//				console.log($(this).siblings().val());
				if($(this).next().val() > 1) {
					//					alert($(this).attr('ornum'));

					var a = $(this).next().val();
					a--;
					$(this).next().val(a);
					if($(this).parents('.cart-goods').find('.gou').hasClass('cliced')) {
						pricea = Number($('.allprice').text()) - Number($(this).parents('.cart-goods').find('.price-dan').text());
						$('.allprice').text(pricea.toFixed(2));
					}
				} else if($(this).next().val() <= 2) {
					mui.toast('所购买商品不能小于1');
				}
			});

			$('.content').on('tap', '.jia', function(e) {
				e.stopPropagation();
				//				alert(typeof($(this).prev().val()));
				//				alert(typeof($(this).attr('ornum')));
				if(Number($(this).prev().val()) >= Number($(this).attr('ornum'))) {
					mui.toast('库存不足 ');
				} else {
					//					console.log($(this).prev().val());
					var a = $(this).prev().val();
					a++;
					$(this).prev().val(a);
					if($(this).parents('.cart-goods').find('.gou').hasClass('cliced')) {
						pricea = Number($('.allprice').text()) + Number($(this).parents('.cart-goods').find('.price-dan').text());
						$('.allprice').text(pricea.toFixed(2));
					}
				}
			})

			/*点击跳转结算，存储id*/
			$('.cart-foot-ri').on('tap', function() {
				if($('.allprice').text() <= 0) {
					mui.toast('请选择商品');
				} else if($('.allprice').text() > 0) {
					//					href('accound.html');
					$('.content>div').length;
//					console.log($('.content>div').length);
					var start = '';
					var start2 = '';
					var start3 = '';
					var start4 = '';
					var start5 = '';
					var start6 = '';
					var arrjid = '';
					
					for(var i = 0; i < $('.content>div').length; i++) {
						if($('.content>div').eq(i).find('.gou').hasClass('cliced')) {

							
							var idd = $('.content>div').eq(i).find('.remove').attr('id');
							start = start + idd + ',';
							var how = $('.content>div').eq(i).find('.shu').text();
							start2 = start2 + how + ',';
							var price = $('.content>div').eq(i).find('.price-dan').text();
							start3 = start3 + price + ',';
							var proid = $('.content>div').eq(i).attr('proid');
							start4 = start4 + proid + ',';
							var zproid = $('.content>div').eq(i).attr('zrpo');
							start5 = start5 + zproid + ',';
							var enterP = $('.content>div').eq(i).attr('enterP');
							start6 = start6 + enterP + ',';
							var jowylogo = $('.content>div').eq(i).attr('jowlogo');
//							console.log(jowylogo);
							
								if(arrjid==''){
									arrjid = jowylogo;
								}else if(arrjid !=''){
									if(arrjid==jowylogo){
										arrjid = jowylogo;
									}else{
										mui.toast('不能同时加入京东商品和魏远商品');
										return false
									}
								}
							
							
//							console.log(arrjid);
							
						}
//                      alert(23232);
						var sta = start.substring(0, start.length - 1);
						var sta2 = start2.substring(0, start2.length - 1);
						var sta3 = start3.substring(0, start3.length - 1);
						var sta4 = start4.substring(0, start4.length - 1);
						var sta5 = start5.substring(0, start5.length - 1);
						var sta6 = start6.substring(0, start6.length - 1);
					}
					localStorage.skid = sta;
					localStorage.how = sta2;
					localStorage.pricejh = sta3;
					localStorage.proid = sta4;
					localStorage.zhproid = sta5;
					localStorage.enterP = sta6;
					mui.openWindow({
						url: 'accound.html',
					});
				}
			});

			function href(a) {
				mui.openWindow({
					url: a,
					show: {
						aniShow: 'pop-in'
					}
				})
			}

			/*点击编辑显示删除div*/
			$('.write').on('tap', function() {
				var bijiao1 = '编辑';
//				alert($(this).text());
//				alert(bijiao1);
				
				$('.remove').css('display','inline-block');
				if($(this).text()==bijiao1){
					$(this).text('取消');
					$('.numbox067').css('float','left');
					$('.remove').css('display','inline-block');
				}else if($(this).text()=='取消'){
					$(this).text('编辑');
					$('.remove').css('display','none');
					$('.numbox067').css('float','right');
				}
				
			})

			/*点击选中物品,对下面的总价格进行增减*/
			$('.content').on('tap', '.goud', function(e) {
				e.stopPropagation();
				if($(this).children('.gou').attr('online') == 0) {
					mui.toast('此商品已经下架，您可以选择其他商品哦')
				} else if($(this).children('.gou').attr('online') > 0) {
					if($(this).children('.gou').hasClass('cliced') == false) {
						$(this).children('.gou').addClass('cliced');
						$('.all-times').text(parseInt($('.all-times').text()) + 1);
						var priceall = Number($(this).children('.gou').parents('.cart-goods').find('.shu').text()) * Number($(this).children('.gou').parents('.cart-goods').find('.price-dan').text());
						//						console.log($('.allprice').text());

						var price = Number($('.allprice').text()) + Number(priceall.toFixed(2));

						$('.allprice').text(price.toFixed(2));

						//						console.log(priceall.toFixed(2));
						//						console.log(priceall);
						//						console.log(typeof Number(priceall.toFixed(2)));
						//						console.log(typeof priceall);

					} else if($(this).children('.gou').hasClass('cliced') == true) {
						$(this).children('.gou').removeClass('cliced');
						$('.all-times').text(Number($('.all-times').text()) - 1);

						var priceall = Number($(this).children('.gou').parents('.cart-goods').find('.shu').text() * Number($(this).children('.gou').parents('.cart-goods').find('.price-dan').text()));

						var price2 = Number($('.allprice').text()) - Number(priceall.toFixed(2));

						$('.allprice').text(price2.toFixed(2));
					}
				}
			})

			/*点击全部获取价格*/
			$('.all-gou').on('tap', function() {
				if($(this).hasClass('cliced') == false) {
					$(this).addClass('cliced');
					$('.gou').addClass('cliced');
					$('.all-times').text($(".content>div").length);
					getall();
				} else if($(this).hasClass('cliced') == true) {
					$(this).removeClass('cliced');
					$('.gou').removeClass('cliced');
					//					console.log($(".content>div").length)
					$('.all-times').text(0);
					$('.allprice').text(0);
				}
			})

			function getall() {
				var times = $('.content>div').length;
				var priceall = 0;
				//				console.log(times);
				for(var u = 0; u < times; u++) {
					var dprice = Number($('.content>div').eq(u).find('.shu').text() * Number($('.content>div').eq(u).find('.price-dan').text()));
					//					console.log(dprice.toFixed(2));
					//					console.log(typeof dprice.toFixed(2));
					priceall = priceall + Number(dprice.toFixed(2));
					//					console.log(priceall.toFixed(2));
					$('.allprice').text(priceall.toFixed(2));
				}
			}

			/*获取购物车商品信息*/
			window.addEventListener('refresh', function(event) {
				$('.content').html('');
				getinfor();
				$('.allprice').text(Number(0));
				//		           alert(111);
			});

			window.addEventListener('allo', function(event) {

				$('.all-times').text(Number(0));
				//		           alert(111);
			});

			getinfor();

			function getinfor() {
				//				console.log('运行');

				$.ajax({
						url: ur + '/mobilemember/shoppingcart/listshoppingcart',
						type: 'POST',
						headers: {
							"X-Token": localStorage.token
						},
						dataType: 'json',
						data: '',
					})
					.done(function(data) {

						//						console.log(data);
						if(data.result.meta.code == 201) {

							var divimg = ('<span style="display: inline-block;width:100%;margin:5rem auto 0;text-align: center;"><img style="width:35%;" src="img/nogood.png"><p style="color:#6a6a6a;font-size: .8rem;">您购物车还没有物品哦</p></span>');

							$('.content').append(divimg);
						} else if(data.result.meta.code == 200) {
							var times = data.result.data.length;
							for(var i = 0; i < times; i++) {
								var b = data.result.data[i].skuProductVO.productVO.mainImg
								//								console.log(b.indexOf(',') + '逗号索引值');
								var m = b.indexOf(',');
								if(m != '-1') {
									var mainImg = b.substring(0, m);
								} else {
									mainImg = b;
								}

								var ifNull = data.result.data[i].skuProductVO.propValueVOs == null ? '' : data.result.data[i].skuProductVO.propValueVOs;
								//								var enterPd = data.result.data[i].enterProductId == null ? '' : data.result.data[i].enterProductId;
								//								console.log(data.result.data[i].skuProductVO.productVO.shortname)
								
								var jowlogo = data.result.data[i].skuProductVO.productVO.jdProductId != null && data.result.data[i].skuProductVO.productVO.jdProductId != '' ? 'jd' : 'wy';
								var div = $('<div class="cart-goods" jowlogo="'+jowlogo+'"  proid=' + data.result.data[i].productId + ' zrpo="' + data.result.data[i].comSkuIds + '" enterP="' + data.result.data[i].enterProductId + '">' +
									'<div class="cart-goods-le">  ' +
									'<div class="goud"><span class="gou" online="' + data.result.data[i].skuProductVO.productVO.online + '"></span></div> ' +
									'<img class="cart-goods-fi" src=' + picur +mainImg+ ' alt="" height="100%"/> </div>' +
									'<div class="cart-goods-ri"> <div class="outdate outdate' + i + '">此商品已下架</div><p>' + data.result.data[i].skuProductVO.productVO.shortname + '' +
									//                                        '<span class="cart-goods-ri-weight">1.50kg</span></p> ' +
									//                                        '<p>3个</p> ' +
//									' <p class="prope"><span class="jieshaopro">'+ifNull+'</span>' +
									'<div class="priaj"><p class="cart-goods-ri-money">¥<span class="price-dan">' + data.result.data[i].skuProductVO.newPrice.toFixed(2) + '</span></p>  <div class="mui-numbox numbox' + i + ' numbox067" data-numbox-min=' + 1 + ' data-numbox-max=' + 100 + ' style="padding:0px;margin-top: 5px;height: 25px;width: 45%;float: right;background: white;border: none;display:inline-block;"> ' +
									'<button class="mui-btn mui-btn-numbox-minus jian" type="button" style="vertical-align: middle;position: static;width: 1.2rem;height: 1.2rem;float: left;border-radius: 100%;color: #e9af29;">-</button> ' +
									'<span id="test" readonly="readonly" class="mui-input-numbox shu" type="number" textue="' + data.result.data[i].number + '" style="vertical-align: middle;width: 1.2rem!important;height: 1.2rem!important;float: left;font-size: .6rem;border: none!important;padding: 0!important;">' + data.result.data[i].number + '</span> ' +
									'<button class="mui-btn mui-btn-numbox-plus jia" ornum=' + data.result.data[i].skuProductVO.enableNum + ' type="button" style="vertical-align: middle;position: static;width: 1.2rem;height: 1.2rem;float: left;border-radius: 100%;color: #e9af29;">+</button> </div><span class="remove" id=' + data.result.data[i].skuProductVO.id + '></span></div>' +
									
									//										'<span>库存：<span>'+data.result.data[i].skuProductVO.enableNum+'</span></span>'+
//									'</p>' +
									'</div></div>');
								$('.content').append(div);
								if(data.result.data[i].skuProductVO.productVO.online == 0) {
									$('.numbox' + i + '').css('display', 'none');
									$('.outdate' + i + '').css('display', 'block');
								} else if(data.result.data[i].skuProductVO.productVO.online > 0) {
									$('.numbox' + i + '').css('display', 'block');
									$('.outdate' + i + '').css('display', 'none');
								}
							}
						} else if(data.result.meta.code == 303) {

							var divimg = ('<span style="display: inline-block;width:100%;margin:5rem auto 0;text-align: center;"><img style="width:35%;" src="img/nogood.png"><p style="color:#6a6a6a;font-size: .8rem;">您还没有登录哦</p></span>');
							$('.content').append(divimg);
						}
					});
			}

			/*删除购物车中商品*/
			$('.content').on('tap', '.remove', function(e) {

				e.stopPropagation();
				var thisid = $(this).attr('id');
				var all = $(this).parents('.cart-goods')
				var btnArray = ['否', '是'];
				mui.confirm('确认删除，确认？', '魏远商城', btnArray, function(e) {
					if(e.index == 1) {
						//				alert(thisid);
						$.ajax({
								url: ur + '/mobilemember/shoppingcart/deleteshoppingcart',
								type: 'POST',
								headers: {
									"X-Token": localStorage.token
								},
								dataType: 'json',
								data: {
									"skuIds": thisid,
									/*"id": '40288051594f367a015963128b240033',*/
								}
							})
							.done(function(data) {
								//								console.log(data);
								if(data.result.meta.code == 200) {
									all.remove();
									mui.toast('删除成功');
									if(all.find('.gou').hasClass('cliced')) {
										all.find('.gou').removeClass('cliced');

										var allp = Number($('.allprice').text());
										var prid = Number(all.find('.price-dan').text());
										var dant = Number(all.find('.shu').text());
										//									alert(allp);
										//									alert(prid);
										//									alert(dant);
										var dallpri = allp - prid * dant;
										$('.allprice').text(dallpri.toFixed(2));
										$('.all-times').text(Number($('.all-times').text() - 1));
									}
								}

							})
					} else if(e.index == 0) {}
				})
			});
		</script>
	</body>

</html>